<!-- directive:title 过滤器 可以用在各个方面的牛b设置 -->
<!-- directive:breadcrumb 过滤器 -->
<div class="panel-body">
    <div class='panel panel-default'>
        <div class='panel-heading'> 标题文本 </div>
        <div class='panel-body'>
            <article class="docs-content">
                <p>AnularJS的过滤器用来格式化需要展示给用户的数据，有很多实用的内置过滤器，也可以自己编写。</p>
                <p>在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如，假设我们希望将字符串 转换成大写，可以对字符串中的每个字符都单独进行转换操作，也可以使用过滤器：</p>
                <script type="text/xianjs" ui-bs>
                    {{ name|uppercase }}
                </script>
                <p>在JavaScript代码中可以通过$filter来调用过滤器。例如，在JavaScript代码中使用lowercase</p>
                <script type="text/xianjs" ui-bs>
                    app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) {
                        $scope.name = $filter('lowercase')('Ari');
                    }]);
                </script>
            </article>
        </div>
    </div>
    <div class='panel panel-default'>
        <div class='panel-heading'> 定义过滤器的使用规范 </div>
        <div class='panel-body'>
            <p>1 默认值统统是null或者空, 目的是和 0 以及状态 区分开</p>
            <p>2 最后使用default过滤器 如果是null 则显示为指定符号</p>
            <p>3 倒数第二使用状态过滤器 通常是自己写的</p>
            <p>4 倒数第三使用格式过滤器 注意所有过滤器必须不处理null或者空</p>
        </div>
        <div class='panel-body'>
            <p>-1 默认为'-' 没有值显示0 有值的话 数字格式化 如下</p>
            <p>--- null, [[ xx1|begin|number|defaultValue ]] =<span class="text-success" ng-init="x1x1 = null"> {{ x1x1|begin|number|defaultValue }} </span></p>
            <p>--- '', [[ xx1|begin|number|defaultValue ]] =<span class="text-success" ng-init="x1x1s = ''"> {{ x1x1s|begin|number|defaultValue }} </span></p>
            <p>--- 0, [[ xx1|begin|number|defaultValue ]] =<span class="text-success" ng-init="x1x2 = 0"> {{ x1x2|begin|number|defaultValue }} </span></p>
            <p>--- 1234567890, [[ xx1|begin|number|defaultValue ]] =<span class="text-success" ng-init="x1x3 = 1234567890"> {{ x1x3|begin|number|defaultValue }} </span></p>
            <p>-2 默认为'-' 没有值显示0 有值的话 金额格式化 如下</p>
            <p>--- null, [[ xx1|begin|number:2|defaultValue ]] =<span class="text-success" ng-init="x2x1 = null"> {{ x2x1|begin|number:2|defaultValue }} </span></p>
            <p>--- '', [[ xx1|begin|number:2|defaultValue ]] =<span class="text-success" ng-init="x2x1s = ''"> {{ x2x1s|begin|number:2|defaultValue }} </span></p>
            <p>--- 0, [[ xx1|begin|number:2|defaultValue ]] =<span class="text-success" ng-init="x2x2 = 0"> {{ x2x2|begin|number:2|defaultValue }} </span></p>
            <p>--- 1234567890, [[ xx1|begin|number:2|defaultValue ]] =<span class="text-success" ng-init="x2x3 = 1234567890"> {{ x2x3|begin|number:2|defaultValue }} </span></p>
            <p>-3 默认为'-' 没有值显示0% 有值的话 百分比格式化 如下</p>
            <p>--- null, [[ xx1|begin|percent:2|defaultValue ]] =<span class="text-success" ng-init="x3x1 = null"> {{ x3x1|begin|percent:2|defaultValue }} </span></p>
            <p>--- '', [[ xx1|begin|percent:2|defaultValue ]] =<span class="text-success" ng-init="x3x1s = ''"> {{ x3x1s|begin|percent:2|defaultValue }} </span></p>
            <p>--- 0, [[ xx1|begin|percent:2|defaultValue ]] =<span class="text-success" ng-init="x3x2 = 0"> {{ x3x2|begin|percent:2|defaultValue }} </span></p>
            <p>--- 12.3656655, [[ xx1|begin|percent:2|defaultValue ]] =<span class="text-success" ng-init="x3x3 = 12.3656655"> {{ x3x3|begin|percent:2|defaultValue }} </span></p>
        </div>
    </div>
    <div class='panel panel-default'>
        <div class='panel-heading'> AngularJS 内置九种过滤器 </div>
        <div class='panel-body'>
            <table class="table">
                <thead>
                    <tr> <th>功能描述<br>代码( 用 [] 代替 {} 来演示 )</th> <th>整理前数据<br>整理后数据<br>说明</th>  </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>货币处理 ( 默认 $ ) <br><code> [[ t1|currency ]]</code></td>
                        <td>{{ t1 }} <br>{{ t1|currency }}<br><span class="text-danger">注意$是自动添加的</span></td>
                    </tr>
                    <tr>
                        <td>货币处理 ( 默认保留两位 ) <br><code>[[ t2|currency: '￥' ]]</code></td>
                        <td>{{ t2 }}<br>{{ t2|currency: '￥' }}<br><span class="text-danger">注意￥是自动添加的</span></td>
                    </tr>
                    <tr>
                        <td>货币处理 ( 默认保留两位 ) <br><code>[[ t2|currency: '' ]]</code></td>
                        <td>{{ t2 }}<br>{{ t2|currency: '' }}<br><span class="text-danger">指定为空</span></td>
                    </tr>
                    <tr>
                        <td>日期格式化 ( 格林威治时间 ) ( y M d h m s E 分别表示 年 月 日 时 分 秒 星期 ) <br><code>[[ t3|date: 'yyyy-MM-dd hh:mm:ss EEEE' ]]}}</code></td>
                        <td>{{ t3 }}<br>{{ t3|date: 'yyyy-MM-dd hh:mm:ss EEEE' }}<br><span class="text-danger">注意传入的是标准日期字符串'2018-04-17T16:48:22'</span></td>
                    </tr>
                    <tr>
                        <td>日期格式化 ( 24小时制 ) <br><code>[[ t3|date: 'yyyy-MM-dd HH:mm:ss' ]]</code></td>
                        <td>{{ t3 }}<br>{{ t3|date: 'yyyy-MM-dd HH:mm:ss' }}<br><span class="text-danger">同上</span></td>
                    </tr>
                    <tr>
                        <td>日期格式化 ( yyyy-MM-dd ) <br><code>[[ t3|date: 'yyyy-MM-dd' ]]</code></td>
                        <td>{{ t3 }}<br>{{ t3|date: 'yyyy-MM-dd' }}<br><span class="text-danger">同上</span></td>
                    </tr>
                    <tr>
                        <td>日期格式化 ( 默认值 )<br><code>[[ t4|date|defaultValue:'-' ]]</code></td>
                        <td>{{ t4 || '&quot;&quot;' }}<br>{{ t4|date|defaultValue:'-' }}<br><span class="text-danger">为空指定默认值</span></td>
                    </tr>
                    <tr>
                        <td>日期格式化 ( 默认值 )<br><code>[[ t4|date|defaultValue:'-' ]]</code></td>
                        <td>{{ t4 || '&quot;&quot;' }}<br>{{ t4|date|defaultValue:'-' }}<br><span class="text-danger">为空指定默认值</span></td>
                    </tr>
                    <tr>
                        <td>匹配属性值中含有a的 <br><code>[[ t5|filter: 'a' ]]</code></td>
                        <td>{{ t5}}<br>{{ t5|filter: 'a' }}</td>
                    </tr>
                    <tr>
                        <td>匹配属性值中含有4的 <br><code>[[ t5|filter: 4 ]]</code></td>
                        <td>{{ t5}}<br>{{ t5|filter: 4 }}</td>
                    </tr>
                    <tr>
                        <td>参数是对象 匹配n属性中含有i的 <br><code>[[ t5|filter: {n: 'i'} ]]</code></td>
                        <td>{{ t5}}<br>{{ t5|filter: {n: 'i'} }}</td>
                    </tr>
                    <tr>
                        <td>参数是函数 指定返回a>4的 <br><code>[[ t5|filter: func ]]</code></td>
                        <td>{{ t5}}<br>{{ t5|filter: func }}</td>
                    </tr>
                    <tr>
                        <td>JSON <br><code>[[ t5|json ]]</code></td>
                        <td>{{ t5}}<br>{{ t5|json }}</td>
                    </tr>
                    <tr>
                        <td>限制数组长度或字符串长度 <br><code>[[ t5|limitTo: 2 ]]</code></td>
                        <td>{{ t5}}<br>{{ t5|limitTo: 2 }}</td>
                    </tr>
                    <tr>
                        <td>按a属性值进行排序 <br><code>[[ t5|orderBy: 'a' ]]</code></td>
                        <td>{{ t5}}<br>{{ t5|orderBy: 'a' }}</td>
                    </tr>
                    <tr>
                        <td>按a属性值进行倒序 <br><code>[[ t5|orderBy: '-a' ]]</code></td>
                        <td>{{ t5}}<br>{{ t5|orderBy: '-a' }}</td>
                    </tr>
                    <tr>
                        <td>lowercase<br><code>[[ t6|lowercase ]]</code></td>
                        <td>{{ t6 }}<br>{{ t6|lowercase }}</td>
                    </tr>
                    <tr>
                        <td>uppercase<br><code>[[ t6|uppercase ]]</code></td>
                        <td>{{ t6 }}<br>{{ t6|uppercase }}</td>
                    </tr>
                    <tr>
                        <td>格式化数字 保留0位小数<br><code>[[ t1|number: 0 ]]</code></td>
                        <td>{{ t1 }}<br>{{ t1|number: 0 }}</td>
                    </tr>
                    <tr>
                        <td>格式化数字 保留1位小数<br><code>[[ t1|number: 1 ]]</code></td>
                        <td>{{ t1 }}<br>{{ t1|number: 1 }}</td>
                    </tr>
                    <tr>
                        <td>格式化数字 保留2位小数<br><code>[[ t1|number: 2 ]]</code></td>
                        <td>{{ t1 }}<br>{{ t1|number: 2 }}</td>
                    </tr>
                    <tr>
                        <td>格式化数字 默认值<br><code>[[ t1|number ]]</code></td>
                        <td>{{ t1 }}<br>{{ t1|number }}</td>
                    </tr>
                    <tr>
                        <td>按照函数的返回值进行排序<br><code>[[ t5|orderBy: orderFunc ]]</code></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class='panel panel-default'>
        <div class='panel-heading'> AngularJS 自定义数字处理过滤器 </div>
        <div class='panel-body'>
            <table class="table">
                <thead>
                    <tr> <th>功能描述<br>代码( 用 [] 代替 {} 来演示 )</th> <th>整理前数据<br>整理后数据</th> </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1位小数 <br><code> [[ t1|fixed1 ]]</code></td>
                        <td>{{ t1 }} <br>{{ t1|fixed1 }}</td>
                    </tr>
                    <tr>
                        <td>2位小数 <br><code> [[ t1|fixed2 ]]</code></td>
                        <td>{{ t1 }} <br>{{ t1|fixed2 }}</td>
                    </tr>
                    <tr>
                        <td>3位小数 <br><code> [[ t1|fixed:3 ]]</code></td>
                        <td>{{ t1 }} <br>{{ t1|fixed:3 }}</td>
                    </tr>
                    <tr>
                        <td>金钱 (有值) <br><code> [[ t1|money ]]</code></td>
                        <td>{{ t1 }} <br>{{ t1|money }}</td>
                    </tr>
                    <tr>
                        <td>金钱 (无值) <br><code> [[ t4|default0|fixed2|money ]]</code></td>
                        <td>{{ t4 || '&quot;&quot;' }} <br>$ {{ t4|default0|fixed2|money }}</td>
                    </tr>
                    <tr>
                        <td>人民币写法 (有值) <br><code> [[ t1|rmb ]]</code></td>
                        <td>{{ t1 }} <br>{{ t1|rmb }}</td>
                    </tr>
                    <tr>
                        <td>百分比 <br><code> [[ t8|percent ]]</code></td>
                        <td>{{ t8 }} <br>{{ t8|percent }}<br><span class="text-danger">注意%是自动添加的</span></td>
                    </tr>
                    <tr>
                        <td>百分比 (乘一下) <br><code> [[ t8|percent2 ]]</code></td>
                        <td>{{ t8 }} <br>{{ t8|percent2 }}<br><span class="text-danger">注意%是自动添加的</span></td>
                    </tr>
                    <tr>
                        <td>四入五入 <br><code> [[ t9|ceil ]]</code></td>
                        <td>{{ t9 }} <br>{{ t9|ceil }}</td>
                    </tr>
                    <tr>
                        <td>四入五入 <br><code> [[ t9|math:'ceil' ]]</code></td>
                        <td>{{ t9 }} <br>{{ t9|math:'ceil' }}</td>
                    </tr>
                    <tr>
                        <td>公式加法 <br><code> [[ t7|add:1:2:3:4:5 ]]</code></td>
                        <td>{{ t7 }} <br>{{ t7|add:1:2:3:4:5 }}</td>
                    </tr>
                    <tr ng-init="t7 = 1">
                        <td>公式计算 <br><code> [[ t10|formula:'(#+5)/2*3' ]]</code></td>
                        <td>{{ t10 }} <br>{{ t10|formula:'(#+5)/2*3' }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class='panel panel-default'>
        <div class='panel-heading'> AngularJS 自定义默认值 </div>
        <div class='panel-body'>
            <table class="table">
                <thead>
                    <tr> <th>功能描述<br>代码( 用 [] 代替 {} 来演示 )</th> <th>整理前数据<br>整理后数据</th> </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>加单位 ( 无需filter ) <br><code> [[ t10 ]] 次</code></td>
                        <td>{{ t10 }} <br>{{ t10 }} 次</td>
                    </tr>
                    <tr>
                        <td>默认值 ( 无需filter ) <br><code> [[ t4 || '无' ]] 次</code></td>
                        <td>{{ t4 }} <br>{{ t4 || '无' }} 次</td>
                    </tr>
                    <tr>
                        <td>默认 null <br><code> [[ t4|defaultNull ]]</code></td>
                        <td>{{ t4 }} <br>{{ t4|defaultNull }}</td>
                    </tr>
                    <tr>
                        <td>默认 0 <br><code> [[ t4|default0 ]]</code></td>
                        <td>{{ t4 }} <br>{{ t4|default0 }}</td>
                    </tr>
                    <tr>
                        <td>默认 无<br><code> [[ t4|defaultValue:'无' ]]</code></td>
                        <td>{{ t4 }} <br>{{ t4|defaultValue:'无' }}</td>
                    </tr>
                    <tr>
                        <td>脱敏（电话账户） <br><code> [[ t11|desensitization' ]]</code></td>
                        <td>{{ t11 }} <br>{{ t11|desensitization }}</td>
                    </tr>
                    <tr>
                        <td>脱敏（邮箱） <br><code> [[ t12|desensitizationEmall ]]</code></td>
                        <td>{{ t12 }} <br>{{ t12|desensitizationEmall }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>


